<template>
  <div class="home-page-content">
    <h3>权限管理</h3>
    <Tabs :value="tabsValue" :animated="false" @on-click="tabsClick">
      <TabPane label="角色" name="Role">
        <RolePage ref="Role" :roleType="tabsValue" v-if="tabsValue == 'Role'" />
      </TabPane>
      <TabPane label="权限组" name="Auth">
        <PermissionPage
          ref="Auth"
          :roleType="tabsValue"
          v-if="tabsValue == 'Auth'"
        />
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import RolePage from "./rolePage.vue";
import PermissionPage from "./rolePage.vue";
export default {
  name: "permissionManage",
  components: { RolePage, PermissionPage },
  data() {
    return {
      tabsValue: "Role",
    };
  },
  methods: {
    tabsClick(ev) {
      this.tabsValue = ev;
      this.$nextTick(() => {
        this.$refs[ev].checkTabs(ev);
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
